<template name="ChoiceSelected">
	<!-- 自定义下拉选择框 start-->
	<view class="selected-all">
		<view :class="isShowChoice ? 'drop-down-box-selected' : 'drop-down-box'" @click.stop="btnShowHideClick">
			<text class="dropdown-content" :class="isShowChoice ? 'selected' : ''">{{choiceContent}}</text>
			<view>
				<image class="dropdown-icon" src="@/static/testslist/icon-Dropdown.png" mode="widthFix"
					v-if="!isShowChoice"></image>
				<image class="dropdown-icon" src="@/static/testslist/icon-Dropup.png" mode="widthFix" v-else></image>
			</view>
		</view>
		<!-- 弹框内容 -->
		<view class="dialog-view" v-if="isShowChoice">
			<text :class="choiceIndex ==index ?'dialog-title-selected':'dialog-title'"
				v-for="(item ,index) in choiceList" @click="btnChoiceClick(index)">
				<view class="tt">
					<view class="ttt">
						{{item.Title}}
					</view>
				</view>>
			</text>
		</view>

	</view>
	<!-- 自定义下拉选择框 end -->
</template>

<script>
	export default {
		name: "ChoiceSelected",
		data() {
			return {
				isShowChoice: false,
				choiceContent: '',
				choiceIndex: 0
			};
		},
		props: {
			choiceList: {},
		},
		onShow() {},
		methods: {
			init() {
				this.$nextTick(() => {
					this.choiceContent = this.choiceList[0].Title
				})
			},
			// 选择
			btnChoiceClick: function(position) {
				var _this = this
				_this.isShowChoice = false
				_this.$emit("onChoiceClick", position)
				this.choiceContent = this.choiceList[position].Title
				this.choiceIndex = position
			},
			// 显示与隐藏选择内容
			btnShowHideClick: function() {
				var _this = this
				if (_this.isShowChoice) {
					_this.isShowChoice = false
				} else {
					_this.isShowChoice = true
				}
				this.$emit('display', _this.isShowChoice)
			},
			hide() {
				this.isShowChoice = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* end */
	.selected {
		color: #047BFC !important;
	}

	.dialog-title-selected {
		color: #047BFC;
		font-size: 28rpx;
		padding: 0 20rpx;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: relative;

		&:not(:last-child) .tt {
			border-bottom: 2rpx solid #ededed;
			width: 100%;
			height: 100%;
		}
	}


	.dialog-title-selected ::after {
		position: absolute;
		right: 20rpx;
		content: '✓';
		font-size: 36rpx;
	}


	.dialog-title {
		color: #333;
		font-size: 28rpx;
		padding:0 20rpx;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:not(:last-child) .tt {
			border-bottom: 2rpx solid #ededed;
			width: 100%;
			height: 100%;
		}

	}

	.dialog-view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100vw;
		z-index: 99;
		border-top: 1px solid #ededed;
		position: absolute;
		left: 15rpx;
		top: 100rpx;
	}



	.dropdown-icon {
		width: 22rpx;
		height: 14rpx;
		margin-left: 15rpx;
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.dropdown-content {
		color: #999;
		font-size: 28rpx;
		padding-left: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		flex-grow: 1;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 330rpx;
	}

	.drop-down-box-selected {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 330rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 2rpx solid #047BFC;
		margin: 15rpx 30rpx;
	}

	.drop-down-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 330rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 2rpx solid #ededed;
		margin: 15rpx 30rpx;

	}

	.selected-all {
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// width: 40%;
		position: relative;
	}

	
	/* start */
</style>
